<style>
.{{$t|escape:'html'}}_main {
  border-left: 15px solid #eaf2f5;
  border-right: 15px solid #eaf2f5;
  width: 1200px;
}
.{{$t|escape:'html'}}_subtitle {
  background-color: #e5f1f5;
  padding: 7px 0 7px 10px;
  font-family: Arial Black;
}
.{{$t|escape:'html'}}_emphasis {
  background-color: #d6e3e8;
  font-weight: bold;
  font-family: Trebuchet MS;
}
table.{{$t|escape:'html'}}_pagecreate {
}
table.{{$t|escape:'html'}}_pagecreate td.title {
  font-weight: bold;
  text-align: right;
  padding: 2px 10px 2px 20px;
  margin-right: 20px;
  background-color: #d6e3e8;
  font-family: Trebuchet MS;
  width: 150px;
  height: 30px;
}
table.{{$t|escape:'html'}}_pagecreate td.content {
  width: 400px;
}
.{{$t|escape:'html'}}_select {
  width: 280px;
  height: 23px;
  margin-left: 4px; 
}

.{{$t|escape:'html'}}_text {
  width: 275px;
  height: 20px;
  margin-left: 4px;
}
.{{$t|escape:'html'}}_textarea {
  width: 275px;
  height: 80px;
  margin-left: 4px;
}
.{{$t|escape:'html'}}_button {
  margin-top: 10px; 
  margin-left: 3px; 
}
</style>
<div class="{{$t|escape:'html'}}_main">
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
      <span class="image_button" style="width: 100px;" onclick="create();">
        <table>
          <tr>
            <td><img src="image/btn/add24.png"></img></td>
            <td>{{t escape='html'}}Add{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  <div>
  <div class="{{$t|escape:'html'}}_subtitle">{{t escape='html'}}Basic Information{{/t}}</div>
  <table class="{{$t|escape:'html'}}_pagecreate">
    <tr>
      <td class="title">{{t escape='html'}}Parent{{/t}}</td>
      <td class="content"><select id="{{$t|escape:'html'}}_parent" class="{{$t|escape:'html'}}_select"></select></td>
      <td class="title">{{t escape='html'}}Home Page{{/t}}</td>
      <td class="content"><input id="{{$t|escape:'html'}}_is_default" type="checkbox" checked="true"></input></td>
    </tr>
    <tr>
      <td class="title">{{t escape='html'}}Name{{/t}}</td>
      <td class="content"><input id="{{$t|escape:'html'}}_name" type="text" class="{{$t|escape:'html'}}_text"></input></td>
      <td class="title">{{t escape='html'}}Appear In Menu{{/t}}</td>
      <td class="content"><input id="{{$t|escape:'html'}}_appear_in_menu" type="checkbox" checked="true"></input></td>
    </tr>
    <tr>
      <td class="title">{{t escape='html'}}Page Type{{/t}}</td>
      <td class="content"><select id="{{$t|escape:'html'}}_type" class="{{$t|escape:'html'}}_select"></select></td>
      <td></td>
      <td></td>
    </tr>
    <tr id="{{$t|escape:'html'}}_type_duplicate" style="display: none;">
      <td class="title">{{t escape='html'}}Page{{/t}}</td>
      <td class="content"><select id="{{$t|escape:'html'}}_duplicate" class="{{$t|escape:'html'}}_select"></select></td>
      <td></td>
      <td></td>
    </tr>
    <tr id="{{$t|escape:'html'}}_type_url" style="display: none;">
      <td class="title">{{t escape='html'}}URL{{/t}}</td>
      <td class="content"><input id="{{$t|escape:'html'}}_url" type="text" class="{{$t|escape:'html'}}_text"></input></td>
      <td></td>
      <td></td>
    </tr>
    <tr id="{{$t|escape:'html'}}_type_customised" style="display: none;">
      <td class="title">{{t escape='html'}}.tpl File{{/t}}</td>
      <td class="content"><input id="{{$t|escape:'html'}}_customised" type="text" class="{{$t|escape:'html'}}_text"></input></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <div class="{{$t|escape:'html'}}_subtitle">{{t escape='html'}}SEO Details{{/t}}</div>
  <table class="{{$t|escape:'html'}}_pagecreate">
    <tr>
      <td class="title">{{t escape='html'}}Description{{/t}}</td>
      <td class="content"><textarea id="{{$t|escape:'html'}}_desc" class="{{$t|escape:'html'}}_textarea"></textarea></td>
      <td class="title">{{t escape='html'}}Key Words{{/t}}</td>
      <td class="content"><textarea id="{{$t|escape:'html'}}_keywords" class="{{$t|escape:'html'}}_textarea"></textarea></td>
    </tr>
  </table>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
      <span class="image_button" style="width: 100px;" onclick="create();">
        <table>
          <tr>
            <td><img src="image/btn/add24.png"></img></td>
            <td>{{t escape='html'}}Add{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  <div>
</div>

<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript">
  <!--
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;

    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;
      
      var message, dup, tmp, elm, op;
      
      message = JSON.parse('{{$msg|escape:javascript}}');
      elm = document.getElementById('{{$t|escape:javascript}}_parent');
      setParent(elm, message['m'], 0);
      
      dup = document.getElementById('{{$t|escape:javascript}}_duplicate');
      setDuplicate(dup, message['m'], 0);

      
      elm = document.getElementById('{{$t|escape:javascript}}_type');
      var types = Utils.getPageTypes();
      for (var i = 0, il = types.length; i < il; i++) {
        tmp = types[i];
        op = new Option(tmp.name);
        op._obj = tmp;
        if (tmp.id == 1 && dup.options.length == 0) {
          op.disabled = true;
        }
        elm.options[elm.options.length] = op;
      }
      
      var duplicate, url, customised;
      duplicate = document.getElementById('{{$t|escape:javascript}}_type_duplicate');
      url = document.getElementById('{{$t|escape:javascript}}_type_url');
      customised = document.getElementById('{{$t|escape:javascript}}_type_customised');
      
      elm.onchange = function() {
        duplicate.style.display = 'none';
        url.style.display = 'none';
        customised.style.display = 'none';
        
        var obj = this.options[this.selectedIndex]._obj;
        if (obj.id == 1) {
          duplicate.style.display = 'table-row';
        } else if (obj.id == 2) {
          url.style.display = 'table-row';
        } else if (obj.id == 3) {
          customised.style.display = 'table-row';
        }
      };
      
      
    }
    
    function setParent(select, node, level) {
      var op;
      if (level == 0) {
        op = new Option('Select...');
      } else {
        op = new Option(node.name);
      }
      op._obj = node;
      op.style.paddingLeft = level * 5 + 'px';
      select.options[select.options.length] = op;
      
      for (var i = 0, il = node.c.length; i < il; i++) {
        setParent(select, node.c[i], level+1);
      }
    }
    
    function setDuplicate(select, node, level) {
      var op;
      if (level != 0) {
        op = new Option(node.name);
        op._obj = node;
        op.style.paddingLeft = level * 5 + 'px';
        select.options[select.options.length] = op;
      }
      
      
      for (var i = 0, il = node.c.length; i < il; i++) {
        setDuplicate(select, node.c[i], level+1);
      }
    }
    
    function create() {
      var type = document.getElementById('{{$t|escape:javascript}}_type'), url = '';
      if (type.options[type.selectedIndex]._obj.id == 1) {
        var dup = document.getElementById('{{$t|escape:javascript}}_duplicate');
        url = dup.options[dup.selectedIndex]._obj.id;
      } else if (type.options[type.selectedIndex]._obj.id == 2) {
        url = document.getElementById('{{$t|escape:javascript}}_url').value;
      } else if (type.options[type.selectedIndex]._obj.id == 2) {
        url = document.getElementById('{{$t|escape:javascript}}_url').value;
      }
      
      var parent = document.getElementById('{{$t|escape:javascript}}_parent');
      var obj = {
        track_id: MiscUtils.unique(),
        parent_id: parent.options[parent.selectedIndex]._obj.id,
        name: document.getElementById('{{$t|escape:javascript}}_name').value,
        is_default: (document.getElementById('{{$t|escape:javascript}}_is_default').checked) ? 1 : 0,
        appear_in_menu: (document.getElementById('{{$t|escape:javascript}}_appear_in_menu').checked) ? 1 : 0,
        type: type.options[type.selectedIndex]._obj.id,
        url: url,
        desc: document.getElementById('{{$t|escape:javascript}}_desc').value,
        keywords: document.getElementById('{{$t|escape:javascript}}_keywords').value,
        order: (parent.options[parent.selectedIndex]._obj.c.length == 0) ? 1 : parseFloat(parent.options[parent.selectedIndex]._obj.c[parent.options[parent.selectedIndex]._obj.c.length - 1].order, 10) + 1
      };
      new RequestUtils()._custom('menu', JSON.stringify(obj), function(result, params) {
        if (obj.type == 0) {
          location.href = 'admin.php?b=baseblank&t=page&i=' + result.id;
        } else {
          location.href = 'admin.php?t=pages';
        }
      }, {
        pos : DOMUtils.findPos(this)
      });
    }
  // -->
</script>


